import React from 'react';
import { Row, Col, Typography } from 'antd';
import MarkdownCodeBlock from '../MarkdownCodeBlock';  // 引入新的 MarkdownCodeBlock 组件
import { ComponentType } from 'react';

const { Title } = Typography;

interface CodePreviewProps {
  title?: string;
  beforeTitle?: string;
  afterTitle?: string;
  beforeCode: string;
  afterCode: string;
  BeforeComponent: ComponentType;
  AfterComponent: ComponentType;
}

const CodeOptimizePreview: React.FC<CodePreviewProps> = ({
  title,
  beforeTitle = '优化前的代码',
  afterTitle = '优化后的代码',
  beforeCode,
  afterCode,
  BeforeComponent,
  AfterComponent,
}) => {
  return (
    <div className="code-preview" style={{ padding: 24 }}>
      {title && <Title level={2}>{title}</Title>}
      <Row gutter={24}>
        {[
          { title: beforeTitle, code: beforeCode, Component: BeforeComponent },
          { title: afterTitle, code: afterCode, Component: AfterComponent }
        ].map((item, index) => (
          <Col span={12} key={index}>
            <MarkdownCodeBlock code={item.code} />
            <div className="demo-section">
              <Title level={4}>运行效果：</Title>
              <item.Component />
            </div>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default CodeOptimizePreview;
